<template>
	<view class="content">
		<CustomNav  :isBack="true" :custom="custom" :title="'发起面试邀请'"></CustomNav>
		<view :style="'margin-top:'+(custom.statusBar+custom.nvaMartom+custom.navHeight+60)+'rpx;'" class="name">邀请{{name}}参加线上面试</view>
		<view class="form-block">
			<view class="form-item">
				<view class="label">面试职位</view>
				<picker class="form-picker" :range="position" range-key="name" @change="bindPosition">{{position[positionIndex].name}}</picker>
				<view class="iconfont icon-gengduo1"></view>
			</view>
			<view class="form-item">
				<view class="label">面试方式</view>
				<input :disabled="true" class="form-input" value="视频面试" />
				<view style="visibility: hidden;" class="iconfont icon-gengduo1"></view>
			</view>
			<view class="form-item">
				<view class="label">联系人</view>
				<input :disabled="true" class="form-input" :value="contact" />
				<view style="visibility: hidden;" class="iconfont icon-gengduo1"></view>
			</view>
		</view>
		<view class="form-block">
			<view class="form-item">
				<view class="label">面试日期</view>
				<picker class="form-picker" mode="date" @change="bindDate" :start="start" >{{date}}</picker>
				<view class="iconfont icon-gengduo1"></view>
			</view>
			<view class="form-item">
				<view class="label">面试时间</view>
				<picker class="form-picker" mode="time" @change="bindTime" >{{time}}</picker>
				<view class="iconfont icon-gengduo1"></view>
			</view>
		</view>
		<view style="padding: 30rpx;" class="form-block">
			<view class="block-title">备注事项</view>
			<textarea v-model="remarks" maxlength="300" placeholder-class="inputPlaceholder" class="form-textarea"></textarea>
		</view>
		<view @click="handleSave" class="button">发送面试邀请</view>
	</view>
</template>

<script>
	import CustomNav from '../components/CustomNav/CustomNav';
	import {getPositionList,submitInterview} from '@/api/interview.js';
	import {getStorage} from '@/util/auth.js';
	import {validate} from '@/util/validate.js';
	import {getCurrentTime,getCustomNavData,get24HoursTime} from '@/util/util.js'
	export default{
		data(){
			return{
				start:getCurrentTime('d'),
				custom:null,
				name:'',//对方名称
				position:[],
				positionIndex:0,
				contact:'',//本人名称和手机号
				date:'请选择',
				time:'请选择',
				remarks:'',
				mobile:'',//对方手机号
			}
		},
		methods:{
			getPosition(){
				uni.showLoading({
					title:'加载中',
					mask:true,
				})
				getPositionList().then((res)=>{
					uni.hideLoading()
					const list=res;
					if(list.length==0){
						this.showToast('无可选择的岗位，请在职位管理发布',()=>{
							uni.redirectTo({
								url:'/page_other/position/position_manage'
							})
						})
					}
					let position=[];
					for(let i=0;i<list.length;i++){
						const current=list[i];
						position.push({
							id:current.id,
							name:current.jobTitle+' '+current.minSalary+' - '+current.maxSalary+'元'
						})
					}
					this.position=position;
				}).catch((res)=>{
					uni.hideLoading()
					this.showToast('加载失败，请重试！',()=>{
						uni.navigateBack()
					})
				})
			},
			bindPosition(e){
				this.positionIndex=e.detail.value;
			},
			bindDate(e){
				this.date=e.detail.value;
			},
			bindTime(e){
				this.time=get24HoursTime(e.detail.value);
			},
			handleSave(){
				const form={remarks:this.remarks,interviewTime:this.date+' '+this.time,pid:this.position[this.positionIndex].id,mobile:this.mobile,plan:1,id:0}
				const rules={
					pid: {
						name: '面试职位',
						required: true
					},
					interviewTime: {
						name: '面试日期和时间',
						required: true,
						validator:function(value,form,callback){
							if(value.length<15){
								callback('请选择正确的面试日期和时间');
							}
							callback();
						}
					}
				}
				if(validate(form,rules)){
					uni.showModal({
						title:'面试诚信原则',
						content:'面试前3小时，双方可申请取消\n如不取消，请按时出席\n爽约乙方，平台会打【不良记录】',
						cancelText:'我再想想',
						confirmText:'不爽约',
						success:(confirm)=>{
							if(confirm.confirm){
								uni.showLoading({
									title:'发送中',
									mask:true
								})
								submitInterview(form).then((res)=>{
									uni.hideLoading();
									const id=res.id;
									const invited=uni.$TUIKit.createCustomMessage({
										to:this.userID,
										conversationType:uni.$TUIKitTIM.TYPES.CONV_C2C,
										payload:{
										  data:'invited',
										  description:'发送面试邀请',
										  extension: JSON.stringify({id,agree:null})
										}
									})
									uni.$TUIKit.sendMessage(invited).then((messageRes)=>{
										uni.$emit('updateMessageList',invited)
										this.showToast('发送邀请成功',()=>{
											uni.navigateBack();
										})
									}).catch(()=>{
										this.showToast('操作失败，请重试！');
									})
								}).catch((res)=>{
									uni.hideLoading();
									this.showToast('发送失败，请稍后重试');
								})
							}
						}
					})
					
				}
			},
		},
		components:{
			CustomNav,
		},
		onLoad(e) {
			this.userID=e.userID;
			const user=this.$store.getters.user;
			this.contact=user.realName+' · '+user.mobile;
			this.mobile=e.mobile;
			this.custom=getCustomNavData();
			this.name=e.name;
			this.getPosition();
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background: linear-gradient(#fc0a3a,#f8f8f8,#f8f8f8,#f8f8f8);
		overflow: hidden;
		min-height: 100vh;
	}
	.name{
		font-size: 42rpx;
		color: #fff;
		position: relative;
		padding:0  40rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}
	.form-block{
		margin: 0 auto;
		width: calc(100% - 60rpx);
		padding:0 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		box-shadow:0 0 9px 0px #dcdcdc;
		.form-item{
			width: 100%;
			height: 120rpx;
			border-bottom: 1px solid #efefef;
			display: flex;
			flex-direction: row;
			align-items: center;
			.label{
				font-size: 28rpx;
				width:140rpx;
				color: #717171;
			}
			.form-picker,.form-input{
				font-size: 30rpx;
				flex-grow: 1;
				font-weight: bold;
			}
			.iconfont{
				flex-grow: 0;
				font-size: 29rpx;
				font-weight: bold;
			}
		}
		.form-item:last-child{
			border: none;
		}
		.block-title{
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			.form-textarea{
				width:100%;
				height: 300rpx;
			}
		}
	}
	.button{
		width: calc(100% - 60rpx);
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin: 20rpx auto;
		box-shadow:0 0 9px 0px #dcdcdc;
		background:#ff7626;
	}
</style>